<template>
  <div>
    <Divider>Autotile</Divider>
    <!-- Autotile大小固定，不用绑定key，且选取模式永远为click -->
    <tiles-map
      ref="autotilesMap"
      v-bind:key="envData.name + 'autotile'"
      v-bind:tiles="autotiles"
      v-bind:width="wrapperWidth"
      v-bind:item-width="itemWidth"
      v-bind:tile-width="envData.tilesWidth"
      v-bind:tile-height="envData.tilesHeight"
      v-bind:hover-border-enabled="hoverBorderEnabled"
      v-bind:selected-mode="getSelectedMode('Autotile')"
      v-on:on-selected="selectedHandler"
      v-on:on-click="clickHandler">
      <template v-slot:props="data">
        <slot name="props" v-bind:index="data.index" v-bind:objects-index="data.objectsIndex"></slot>
      </template>
    </tiles-map>

    <Divider>图集</Divider>
    <!-- 图集大小不固定，需要频繁刷新，必须绑定完全不同的key，key取决于图块的宽高，选取模式可能为拖拽 -->
    <tiles-map
      ref="tilesMap"
      v-bind:key="'tile' + envData.name + envData.tilesWidth + envData.tilesHeight"
      v-bind:tiles="tiles"
      v-bind:width="wrapperWidth"
      v-bind:item-width="itemWidth"
      v-bind:tile-width="envData.tilesWidth"
      v-bind:tile-height="envData.tilesHeight"
      v-bind:hover-border-enabled="hoverBorderEnabled"
      v-bind:selected-mode="getSelectedMode('Tile')"
      v-on:on-selected="selectedHandler"
      v-on:on-click="clickHandler">
      <template v-slot:props="data">
        <slot name="props" v-bind:index="data.index" v-bind:objects-index="data.objectsIndex"></slot>
      </template>
    </tiles-map>
  </div>
</template>

<script src="./envShow.js"></script>

<style lang="stylus">
@import './envShow.styl'
</style>
